<template>
    <div class="create">
        <div class="edit">
            请输入题目:
            <el-input v-model="WholeSurvey.survey.surTitle" class="input"></el-input><br/>
            <el-button @click="log()" v-show="false">打印</el-button>
           
            <el-button @click="save()">保存问卷</el-button>
            <el-button @click="delTitle()">删除问卷最后一题</el-button><br/>
             <el-button @click="add()">添加</el-button>
            <!--类型选择框  -->
            <el-select v-model="choiceType" placeholder="请先选好类型再添加">
            <el-option
                v-for="item in typeForm"
                :key="item.type"
                :label="item.label"
                :value="item.type">
            </el-option>
            </el-select>
        </div>
        <br/><br/><br/>
        <!-- 遍历循环各个题目 -->
        <div class="items">
            <div v-for="(item,index) in WholeSurvey.wholeTitles" :key="index" >
                <singlechoice   v-if="item.title.type==1" ref="a"><p> {{item}}:::{{index}}</p></singlechoice>
                <multichoice v-if="item.title.type==2" refs='b'></multichoice>
                <inputbox v-if="item.title.type==3" refs='a'></inputbox>
                <br/><br/><br/>
            </div>  
        </div>
    </div>
</template>

<script>
//关于对类型的控制，使用if--else进行选择判断
import singlechoice from './options/singleChoice';
import multichoice from './options/multiChoice'
import inputbox from './options/inputBox'

export default {
    data () {
        return {
            subindex: 6,               //子组件的下标（从1开始算）
            count: 1,               //题目数量
            choiceType: 1,         //添加类型
            typeForm:[{             //类型选择框
                type: 1,
                label: '单项选择题'
            },{
                type: 2,
                label: '多项选择题'
            },{
                type: 3,
                label: '单项填空题'
            },],
            //问卷信息
            WholeSurvey:{
                userName:'',
                survey: {
                    surId: '',
                    userId: '3',
                    state:'1',  //1:未发布2：已发布
                    surTitle:'问卷题目',
                    surDate:'6',
                    surNum:'',    //感觉不需要，先放着
                },
                 wholeTitles:[{                  
                    title:{
                        type:'1',
                        must: 1,
                        content:'',
                        titNum:'1',
                    },
                    choices: [                       //选项的信息  
                        {
                        choiceNum: 1,               //choiceNum表示选项号 
                        content: ''                  //表示内容
                        }]    
                 }],
                 
            }
           
        }
    },
    methods: {
        //增加题目
      add(){
          this.WholeSurvey.wholeTitles.push({
              title:{
                  type:this.choiceType,
                  titNum:this.count+1
              },
              choice:{                 
              }
          });
          this.count++;
      },
        //删除题目
      delTitle(){
          this.WholeSurvey.wholeTitles.pop();
          this.count--;  
      },  
        //打印题目
      log(){
        //   console.log(this.$children);
        //   console.log(new Date().toLocaleString());
        //  this.test=this.$children[1].items;
        //   console.log(this.test);
        console.log(this.WholeSurvey);
        // console.log(this.WholeSurvey.wholeTitles);
        // console.log(this.$children[6].wholeTitles);//使用这个的弊端是，对组件数量的增长很敏感
        //  console.log(this.$refs);
      },
      save(){
          //先保存数据到index中
          for(var index in this.WholeSurvey.wholeTitles){
            // console.log(typeof(this.count));
            // console.log(this.$children);
            // console.log(this.items[index])
            //  console.log(this.$children[this.subindex]);

            // 通过children直接获取子组件的信息，并且传给父组件
            this.WholeSurvey.wholeTitles[index].choices=this.$children[this.subindex].wholeTitles.choices;     //直接通过子组件的方法获取相关信息
            this.WholeSurvey.wholeTitles[index].title.must=this.$children[this.subindex].wholeTitles.title.must;
            this.WholeSurvey.wholeTitles[index].title.content=this.$children[this.subindex].wholeTitles.title.content;
            
            this.WholeSurvey.userName=sessionStorage.userName;
            this.WholeSurvey.survey.surDate=new Date().toLocaleString();
            this.subindex++;
          }

          this.subindex=6;

        //发送表数据
        this.$axios.post('http://localhost:8082/home/create',this.WholeSurvey)
        .then(res=>{
            // console.log(this.WholeSurvey.survey);
            console.log(res.data);
        })
        
         this.$router.push('okcreate');

      },

    },
    components: {
        singlechoice,
        multichoice,
        inputbox
    },

}
</script>
<style>
.create{
    float:bottom;
}

.items{

    top: 220px;
   float: inherit;   
}
.input{
    width: 330px;
}
</style>